<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./common2.css">
    <link rel="stylesheet" href="./index2.css">
</head>

<body>
    <!-- 干完活了 今日工作完成 实现了xxx功能 -->
    <!-- 新编辑的代码哦 -->
    <!-- 网页的头部 -->
    <header>
        <div class="container">
            <ul class="fr">
                <li><a href="#">请先登录</a>|</li>
                <li><a href="#">免费注册</a>|</li>
                <li><a href="#">我的订单</a>|</li>
                <li><a href="#">会员中心</a>|</li>
                <li><a href="#">帮助中心</a>|</li>
                <li><a href="#">在线客服</a>|</li>
                <!-- <li><a href="#"><span></span>手机版</a></li> -->
                <li><a href="#">手机版</a></li>
            </ul>
        </div>
    </header>

    <!-- 网页的logo和导航栏 -->
    <div class="xtx-main-nav container">
        <!-- logo部分 -->
        <h1 class="logo fl">
            <a href="#">小兔鲜儿</a>
        </h1>
        <!-- 导航栏部分 -->
        <ul class="nav fl">
            <li><a href="#">首页</a></li>
            <li><a href="#">生鲜</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">餐厨</a></li>
            <li><a href="#">电器</a></li>
            <li><a href="#">居家</a></li>
            <li><a href="#">洗护</a></li>
            <li><a href="#">孕婴</a></li>
            <li><a href="#">服装</a></li>
        </ul>
        <!-- 搜索栏部分 -->
        <div class="search fl">
            <input type="search" placeholder="小哥搜一搜">
        </div>
        <!-- 购物车部分 -->
        <div class="cart fl">
            <span>2</span>
        </div>
    </div>

    <!-- 网页的入口 -->
    <div class="entry">
        <div class="container">
            <ul class="banner">
                <li>
                    <a href="#"><img src="./uploads/banner_1.png" alt=""></a>
                </li>
            </ul>
            <ul class="aside">
                <li><a href="#"><span>生鲜</span>水果 蔬菜</a></li>
                <li><a href="#"><span>美食</span>面点 干果</a></li>
                <li><a href="#"><span>餐厨</span>数码产品</a></li>
                <li><a href="#"><span>电器</span>床品 四件套 被枕</a></li>
                <li><a href="#"><span>居家</span>奶粉 玩具 辅食</a></li>
                <li><a href="#"><span>洗护</span>洗发 洗护 美妆</a></li>
                <li><a href="#"><span>孕婴</span>奶粉 玩具</a></li>
                <li><a href="#"><span>服饰</span>女装 男装</a></li>
                <li><a href="#"><span>杂货</span>户外 图书</a></li>
                <li><a href="#"><span>品牌</span>品牌制造</a></li>
            </ul>
            <a href="#" class="prev"></a>
            <a href="#" class="next"></a>
            <!-- 轮播图部分 -->
            <ol>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#" class="white"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ol>
        </div>
    </div>

    <!-- 网页的好物推荐 -->
    <div class="xtx-newgoods container">
        <div class="goods-th">
            <h2 class="fl">新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
            <a href="#" class="fr">查看全部</a>
        </div>

        <div class="goods-list">
            <ul>
                <li><a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p><span>¥</span> 899</p>
                    </a>
                </li>
                <li><a href="#">
                        <img src="./uploads/new_goods_2.jpg" alt="">
                        <h4>智能环绕3D空调</h4>
                        <p><span>¥</span> 1299</p>
                    </a>
                </li>
                <li><a href="#">
                        <img src="./uploads/new_goods_3.jpg" alt="">
                        <h4>广东软软糯米煲仔饭</h4>
                        <p><span>¥</span> 129</p>
                    </a>
                </li>
                <li><a href="#">
                        <img src="./uploads/new_goods_4.jpg" alt="">
                        <h4>罗西机械智能手表</h4>
                        <p><span>¥</span> 3399</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 网页人气爆款 人气高popularity  -->
    <div class="popularity container">
        <h3>人气推荐<span>人气爆款 不容错过</span></h3>
        <ul>
            <li><a href="#">
                    <img src="./uploads/popular_1.jpg" alt="">
                    <p>特惠推荐</p>
                    <p>我猜得到 你的需要</p>
                </a>
            </li>
            <li><a href="#">
                    <img src="./uploads/popular_2.jpg" alt="">
                    <p>爆款推荐</p>
                    <p>人气好物推荐</p>
                </a>
            </li>
            <li><a href="#">
                    <img src="./uploads/popular_3.jpg" alt="">
                    <p>场景使用一站买全</p>
                    <p>编辑精心整理推荐</p>
                </a>
            </li>
            <li><a href="#">
                    <img src="./uploads/popular_4.jpg" alt="">
                    <p>领券中心</p>
                    <p>发现更多超值优惠券</p>
                </a>
            </li>
        </ul>
    </div>

    <!-- 网页热门品牌brand-goods -->
    <div class="brand-goods">
        <div class="container">
            <div class="font"></div>
            <h3>热门品牌<span>国际经典 品质保证</span></h3>
            <ul>
                <li><a href="#"><img src="./uploads/brand_goods_1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/brand_goods_2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/brand_goods_3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/brand_goods_4.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/brand_goods_5.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>

    <!-- 网页的生鲜部分 fresh  -->
    <div class="fresh-goods container">
        <div class="font">
            <h3 class="fl">生鲜</h3>
            <ul class="fl">
                <li><a href="#">水果</a></li>
                <li><a href="#">蔬菜</a></li>
                <li><a href="#">肉禽蛋</a></li>
                <li><a href="#">裤装</a></li>
                <li><a href="#">衬衫</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">内衣</a></li>
            </ul>
            <a href="#" class="all">查看全部</a>
        </div>
        <div class="fresh-pic">
            <div class="left fl"><a href="#"></a></div>
            <ul class="right fr">
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_1.jpg" alt="">
                        <p>美威 智利原味三文鱼排 240g/袋 4片装<br>海鲜年货</p>
                        <p><span>¥</span> 59</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_2.jpg" alt="">
                        <p>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只<br>火锅食材</p>
                        <p><span>¥</span> 79</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_3.jpg" alt="">
                        <p>三都港 冷冻无公害黄花鱼 700g 2条 袋装<br>海鲜水产</p>
                        <p><span>¥</span> 49</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_4.jpg" alt="">
                        <p>渔公码头 大连鲜食入味 即食海参 辽参刺参<br>调味海</p>
                        <p><span>¥</span> 899</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_5.jpg" alt="">
                        <p>越南白心火龙果4个装 标准果400-550g<br>新鲜水果</p>
                        <p><span>¥</span> 20</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_6.jpg" alt="">
                        <p>广西沃柑 新鲜水果 柑橘1.5kg<br>新鲜水果</p>
                        <p><span>¥</span> 10</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_7.jpg" alt="">
                        <p>进口 牛油果 6个装 单果重约130-180g<br>新鲜水果</p>
                        <p><span>¥</span> 50</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/fresh_goods_8.jpg" alt="">
                        <p>泰国进口山竹5A级 <br>500g<br>新鲜水果</p>
                        <p><span>¥</span> 60</p>
                    </a>
                    <div class="box">
                        <p>找相似</p>
                        <a href="#" class="find">发现更多宝贝 ></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 网页的最新专题topic -->
    <div class="topic">
        <div class="container">
            <div class="font">
                <h3 class="fl">最新专题</h3>
                <a href="#" class="all fr">查看全部</a>
            </div>
            <ul class="topic-goods">
                <li>
                    <a href="#">
                        <p>吃这些美食才不算辜负自己</p>
                        <p>餐厨起居洗护好物</p>
                        <div class="money"><span>¥</span> 29.9起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>吃这些美食才不算辜负自己</p>
                        <p>餐厨起居洗护好物</p>
                        <div class="money"><span>¥</span> 29.9起</div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <p>吃这些美食才不算辜负自己</p>
                        <p>餐厨起居洗护好物</p>
                        <div class="money"><span>¥</span> 29.9起</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 网页的底部 -->
    <footer>
        <!-- 联系方式 -->
        <div class="footer-contact"></div>

        <!-- 宣传服务 -->
        <div class="footer-service">
            <div class="container">
                <a href="#">价格亲民</a>
                <a href="#">物流快捷</a>
                <a href="#">品质新鲜</a>
            </div>
        </div>

        <!-- 版权信息 -->
        <div class="copyright">
            <div class="container">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </footer>
</body>

</html>